<script setup lang="ts">
  import SearchSelect from '@/components/SearchSelect/SearchSelect.vue';
  import { getPoemsList, getPoemsAuthors } from '@/services/api/poem';
  import { ref } from 'vue';
  import { debounce } from '@/utils/debounce';

  const keyword = ref(null);
  // 作者列表
  const author = ref<any>(null);
  // 作者简介
  const authorProp = ref<any>({});
  const content = ref<any>(null);
  const options = ref<Array<String>>([]);
  const authors = ref<Array<String>>([]);
  const search = () => {
    debounce(getDatas, 1000, false);
  };
  const searchAuthor = () => {
    debounce(getAuthors, 1000, false);
  };
  const getAuthors = () => {
    return new Promise<any>((resolve, reject) => {
      getPoemsAuthors({ name: author.value })
        .then((result) => {
          authors.value = result.data;
          resolve(result.data);
        })
        .catch((err) => {
          reject(err);
        });
    });
  };
  const getDatas = async () => {
    return new Promise<any>((resolve, reject) => {
      getPoemsList({ title: keyword.value, name: author.value, pageSize: 30 })
        .then((result) => {
          console.log('result: ', result);
          options.value =
            result.data?.map((e: any) => {
              return e;
            }) || [];
          resolve(options.value);
        })
        .catch((err) => {});
    });
  };

  const select = async (e: any) => {
    console.log('content.value: ', content.value);
  };
  const selectAuthor = (e: any) => {
    console.log(`output->e`, e);
  };

  const searchBtn = async () => {
    authorProp.value = await getAuthors();
    content.value = await getDatas();
  };

  const handleContentConvert = (content: string) => {
    return content.replace(/(\n|\r|\r\n|↵|？|。)/gi, '<br/>');
  };
</script>
<template>
  <div>
    <search-select
      label="诗词作者"
      :candidates="authors"
      keyValue="id"
      keyLabel="author"
      placeholder="请选择"
      @input="searchAuthor"
      @afterSelect="selectAuthor"
      v-model="author"
    ></search-select>
  </div>
  <div>
    <search-select
      label="诗词标题"
      :candidates="options"
      keyValue="id"
      keyLabel="title"
      placeholder="请选择"
      @input="search"
      @afterSelect="select"
      v-model="keyword"
    ></search-select>
  </div>
  <u-button type="primary" @click="searchBtn">搜索</u-button>

  <div class="container">
    <div class="author-prop">
      {{ authorProp[0]?.paragraphs || '' }}
    </div>
    <div class="article-list" v-for="(item, index) in content">
      <div class="title">{{ item.title }}</div>
      <div class="author">{{ item.author }}</div>
      <div class="content" v-html="handleContentConvert(item?.paragraphs)"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .author-prop {
    color: #6f6f6f;
    font-size: 12px;
    padding: 12px;
  }
  .article-list {
    text-align: center;
    .title {
      font-weight: bold;
    }
    .author {
      color: #a9a9a9;
      font-size: 24rpx;
      padding: 12rpx 0;
    }
  }
</style>
